<template>
<div>
  <button @click="modelopens=true">弹出一个动态窗口</button>
  <p>页面已经打开 {{number}} s了哦</p>
  <p>{{notModified}}</p>
  <teleport to="body">
    <div v-if="modelopens" class="model">
      <div>
        这是一个弹框，我的父类是 body
        <button @click="modelopens=false">关闭</button>
      </div>
    </div>
  </teleport>
</div>
</template>

<script>

import {computed,toRefs, ref, onUnmounted,reactive,onMounted} from "vue"

export default {
  name: "index",
  setup(){
    const {modelopens,notModified,number} = UsersModel()
    return {modelopens,notModified,number}
  },
}

function UsersModel() {
  const UsersModelNumber = reactive({
    modelopens:ref(false),
    notModified:computed(()=> !UsersModelNumber.modelopens),
    number: ref(1)
  })

  let timer; // 定时器的一个方法，哟个简单的案例，及在一秒钟之内 count 不断变大/1s 时间差

  onMounted(() => {
    timer = setInterval(() => {
      UsersModelNumber.number++
    }, 1000)
  })

  onUnmounted(()=>{
    clearInterval(timer)
  })

  return toRefs(UsersModelNumber)
}
</script>

<style scoped>
.model{
  position: absolute;
  top: 0;right: 0;left: 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.model div{
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: aliceblue;
  width: 300px;
  height: 300px;
  padding: 5px;
}
</style>
